﻿<%@page import="language.Languages"%>
<%@page import="nftrainer.helper.NFMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.util.HashMap"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>edb - 3NFTrainer</title>
		<link type="text/css" href="css/main.css" rel="stylesheet" />
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript">
			var points = 5;
			var solved = 0;
		</script>
		<script type="text/javascript">
			$(function(){
				$("a#btn-getSolution").button().click(
					function() { 
						$(this).hide();
						$("a#btn-sendSolution").hide();
						if (solved == 0) {
							points = 0;
							$("div#userSolution-sample").show();
						}
						$("div#userSolution-error").hide();
						$("div#ctn-solution").load("solution.jsp?points="+points, function() {
							$("a#btn-next").button().show();
						});
					}	
				);
				
				$("a#btn-toggleTableData").button().click(
					function() { 
						$("table.taskTable tbody").toggle();
					}	
				);
				$("a#btn-restart").button().show();
			});
		</script>
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$("#load-indicator").ajaxStart(function(){
					$(this).show();
				});
				$("#load-indicator").ajaxComplete(function(){
					$(this).hide();
				});
			});
		</script>
	</head>
	<body>
		<jsp:useBean id="c" scope="session" class="nftrainer.Controller"/>
		<jsp:useBean id="textHandler" scope="session" class="language.TextHandler"/>
		<%
		if (request.getParameter("language") != null) {
			if (request.getParameter("language").equals("en_GB")) {
				textHandler.setLanguage(Languages.en_GB);
			} else if (request.getParameter("language").equals("de_DE")) {
				textHandler.setLanguage(Languages.de_DE);
			}
		}
		%>
		<div style="width:909px;">
			<%=textHandler.printf("index.task") %><br /><br />
			<%
			if (!c.isStarted() || request.getParameter("language") != null || request.getParameter("restart") != null) {
				c.start(textHandler);
			}
			out.println(c.getTask()+"<br /><br />");
			HashMap<Integer, String[][]> map;
			
			map = c.getActualTaskTable();
			int size = map.size();
			if(size > 0) {
				out.println("<a id=\"btn-toggleTableData\">"+textHandler.printf("index.tablecontent")+"</a><br /><br />");
			}
			out.println("<div id=\"scrollable\">");
			for (int n = 0; n < size; n++) {
				out.println("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"taskTable\">");
				String[][] table = map.get(n);
				for (int i = 0; i < table.length; i++) {
					if (i == 0) {
						out.println("<thead>");
					} else if (i == 1) {
						out.println("<tbody>");
					}
					out.println("<tr>");
					for (int j = 0; j < table[0].length; j++) {
						out.print((i==0 ? "<th class=\"tbl-header-draggable\">" : "<td class=\"taskTable\">")+table[i][j]+((i==0) ? "</th>" :"</td>"));
					}
					out.println("</tr>");
					if (i == 0) {
						out.println("</thead>");
					}
				}
				out.println("</tbody>");
				out.println("</table><br />");
			}
			out.println("</div>");
			if (c.getActualTaskNumber() > 2) {
				out.println("<div style=\"float:left;margin-right:25px\">"+textHandler.printf("index.functional")+"<br />"+c.getFunctional()+"</div>");
			}
			if (c.getActualTaskNumber() > 3) {
				out.println("<div>"+textHandler.printf("index.primary")+"<br />"+c.getPrimaryKeys()+"</div>");
			}
			out.println("<div style=\"clear:both;\"></div>");
			out.println("<h4>"+c.getActualSubtask()+"</h4>");
			%>			
			
			<div id="ctn-userSolution">
<% 
switch( c.getActualTaskNumber() ) { 
	case 1:
	case 3:		
%>
				<div id="dropping-zone">
					<ul id="lst-values0" class="lst-values"><li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li></ul>
				</div>
				
				<div id="error-dialog" style="display: none;" title="Fehler"><%=textHandler.printf("index.error2") %></div>
				
				<script type="text/javascript">
					$(function(){
						var counter = 1;
						$("th.tbl-header-draggable").draggable({ 
							helper: 'clone', 
							cursor: 'move', 
							revert: 'invalid' 
						});
						var dropOptions = { activeClass: "ui-state-default",
							hoverClass: "ui-state-hover",
							drop: function( event, ui ) {
								var dragText = ui.draggable.text();
								if( !($("ul.lst-values").has( "li:contains('" + dragText + "')").length) ) {
									$( this ).find( ".placeholder" ).remove();
									$( "<li class='liste-option'></li>" ).html( '<span>' + dragText + '</span><a href="#" class="rm-item"><span class="icn-rm-item ui-icon ui-icon-trash"/></a>' ).attr("id", dragText).appendTo( this );								
								} else {
									$("div#error-dialog").dialog({
										modal: true,
										resizable: false
									});
								}
							}
						};
						
						$( "#dropping-zone ul" ).droppable( dropOptions );
						
						$("a#btn-sendSolution").button().click(function() {							
							var elements = $("ul");
							var inhalt = "tasktype=lst&";
							var lst = $("ul#lst-values0 li.liste-option");
							if ( lst.length ) {
								inhalt += "lst=";
								lst.each(function() {
									inhalt += $(this).attr("id") + ",";
								});
								inhalt = inhalt.substring(0, inhalt.length-1);
							}
							$("div#userSolution-error").hide();
							$.ajax({ url: "compare.jsp?" + inhalt,
								success: function(data) {
									data = $.trim(data);
									if( data == "true" ) {
										if (points == 0) {
											points+=1;
										}
										solved = 1;
										$("div#userSolution-success").show();
										$("a#btn-getSolution").trigger('click');
									}
								    else {
								    	$("div#userSolution-error").show();
								    	if (points > 0) {
								    		points-=1;
								    	}
								    }
								}
							});  
						});
						
						$("div#dropping-zone").on("click", "a.rm-item", function(e) {
							e.preventDefault();
							var lst = $(this).closest("ul");
							$(this).closest("li").remove();
							if( lst.is(":empty") ) {						
								lst.append('<li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li>');
							}
						});
					});
				</script>
<%
		break;
	case 2:
	case 4:
	case 5:
%>				
				
				<div id="dropping-zone">
					<div class="ctn-key-value">
						<div class="ctn-delete">
							<a href="#" class="rm-ctn" style="display:none;"><span class="icn-rm-ctn ui-icon ui-icon-trash"></span></a>
						</div>
						<div class="ctn-key">
							<%=textHandler.printf("index.keys") %>:<ul id="lst-keys0" class="lst-keys"><li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li></ul>
						</div>
						<div class="ctn-arrow">-&#62;</div>
						<div class="ctn-value">
							<%=textHandler.printf("index.values") %>:<ul id="lst-values0" class="lst-values"><li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li></ul>
						</div>
						<div class="clearer"></div>
					</div>
				</div>
				
				<div id="error-dialog" style="display: none;" title="Fehler"><%=textHandler.printf("index.error") %></div>
				
				<script type="text/javascript">
					$(function(){
						var counter = 1;
						$("th.tbl-header-draggable").draggable({ 
							helper: 'clone', 
							cursor: 'move', 
							revert: 'invalid' 
						});
						var dropOptions = { activeClass: "ui-state-default",
							hoverClass: "ui-state-hover",
							drop: function( event, ui ) {
								var dragText = ui.draggable.text();
								var ctn       = $(this).closest("div.ctn-key-value");
								var ctnKeys   = ctn.find("ul.lst-keys");
								var ctnValues = ctn.find("ul.lst-values");
								
								if( !(ctnKeys.has( "li:contains('" + dragText + "')").length) && !(ctnValues.has( "li:contains('" + dragText + "')").length) ) {
									if( ctnKeys.has("li.placeholder").length && ctnValues.has("li.placeholder").length ) {
										selector =  '<div class="ctn-key-value">\n'
												+ 	'	<div class="ctn-delete">'
												+ 	'		<a href="#" class="rm-ctn" style="display:none;"><span class="icn-rm-ctn ui-icon ui-icon-trash"/></a>'
												+ 	'	</div>'
												+	'	<div class="ctn-key">'
												+	'		<%=textHandler.printf("index.keys") %>:<ul id="lst-keys' + counter + '" class="lst-keys"><li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li></ul>'
												+	'	</div>'
												+	'	<div class="ctn-arrow">-&#62;</div>'
												+	'	<div class="ctn-value">'
												+	'		<%=textHandler.printf("index.values") %>:<ul id="lst-values' + counter + '" class="lst-values"><li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li></ul>'
												+	'	</div>'
												+	'	<div class="clearer"></div>'
												+	'</div>';
										$(selector).appendTo( "div#dropping-zone" );
										$('ul#lst-keys' + counter).droppable( dropOptions );
										$('ul#lst-values' + counter).droppable( dropOptions );
										ctn.find("a.rm-ctn").show();
										counter++;
									}
									$( this ).find( ".placeholder" ).remove();
									$( "<li class='liste-option'></li>" ).html( '<span>' + dragText + '</span><a href="#" class="rm-item"><span class="icn-rm-item ui-icon ui-icon-trash"/></a>' ).attr("id", dragText).appendTo( this );								
								} else {
									$("div#error-dialog").dialog({
										modal: true,
										resizable: false
									});
								}
							}
						};
						
						$( "#dropping-zone ul" ).droppable( dropOptions );
						$("a#btn-sendSolution").button().click(function() {
							var mapCount = 0;
							var elements = $("div.ctn-key-value");
							var inhalt = "tasktype=kv&";
							$.each( elements, function() { 						
								var lstKeys = $(this).find("ul.lst-keys li.liste-option");
								var lstValues = $(this).find("ul.lst-values li.liste-option");
								if ( lstKeys.length ) {	
									inhalt += "lst" + mapCount + "=";
									lstKeys.each(function() {
										inhalt += $(this).attr("id") + ",";
									});
									inhalt = inhalt.substring(0, inhalt.length-1);
									inhalt += ":";
									lstValues.each(function() {
										inhalt += $(this).attr("id") + ",";
									});
									inhalt = inhalt.substring(0, inhalt.length-1);
									inhalt += "&";
									mapCount++;
								}
							});
							inhalt = inhalt.substring(0, inhalt.length-1);
							$("div#userSolution-error").hide();
							$.ajax({ url: "compare.jsp?" + inhalt,
								success: function(data) {
									data = $.trim(data);
									if( data == "true" ) {
										if (points == 0) {
											points+=1;
										}
										solved = 1;
										$("div#userSolution-success").show();
										$("a#btn-getSolution").trigger('click');
									}
								    else {
								    	$("div#userSolution-error").show();
								    	if (points > 0) {
								    		points-=1;
								    	}
								    }
								}
							}); 
						});
						
						$("div#dropping-zone").on("click", "a.rm-item", function(e) {
							e.preventDefault();
							var lst = $(this).closest("ul");
							var ctn       = $(this).closest("div.ctn-key-value");
							var ctnKeys   = ctn.find("ul.lst-keys");
							var ctnValues = ctn.find("ul.lst-values");
							$(this).closest("li").remove();
							if( lst.is(":empty") ) {						
								lst.append('<li class="placeholder"><%=textHandler.printf("index.tablecolumn") %></li>');
								if( ctnKeys.has("li.placeholder").length && ctnValues.has("li.placeholder").length ) {
									ctn.remove();
								}
							}
						});
						$("div#dropping-zone").on("click", "a.rm-ctn", function(e) {
							e.preventDefault();
							$(this).closest("div.ctn-key-value").remove();
						});
					});
				</script>
<% 
		break;
	case 0:
%>
		<div id="boolean-zone">
		<input type="radio" name="isnf" id="yes" /><%=textHandler.printf("index.yes") %>
		<input type="radio" name="isnf" id="no" /><%=textHandler.printf("index.no") %>
		</div>
		<br />
		<script type="text/javascript">
			$(function(){
				var counter = 1;
				
				$("a#btn-sendSolution").button().click(function() {							
					var inhalt = "tasktype=bool&bool=";
					if ($('#yes').is(':checked')) {
						inhalt+="true";
					} else {
						inhalt+="false";
					}
					
					$("div#userSolution-error").hide();
					$.ajax({ url: "compare.jsp?" + inhalt,
						success: function(data) {
							data = $.trim(data);
							if( data == "true" ) {
								if (points == 0) {
									points+=1;
								}
								solved = 1;
								$("div#userSolution-success").show();
								$("a#btn-getSolution").trigger('click');
							}
						    else {
						    	$("div#userSolution-error").show();
						    	if (points > 0) {
						    		points-=1;
						    	}
						    }
						}
					});  
				});
			}); 
		</script>
<%
		break;
} 
%>
			</div>
			<table id="buttons">
				<tr>
					<td id="left"><a id="btn-sendSolution"><%=textHandler.printf("index.solve") %></a></td>
					<td id="center"><a id="btn-getSolution"><%=textHandler.printf("index.samplesol") %></a>
					<% if( c.getActualTaskNumber() < 5 ) { %>
						<a href="index_neu.jsp" id="btn-next" style="display: none;""><%=textHandler.printf("index.next") %></a>
					<% } %></td>
					<td id="right"><a href="index_neu.jsp?restart=true" id="btn-restart" style="display:none;"><%=textHandler.printf("index.restart") %></a></td>
				</tr>
			</table>
			<img src="img/loader.gif" id="load-indicator" style="display: none;margin-left:auto; margin-right:auto; left:439px;margin-top:10px;position:absolute;" />
			<div id="userSolution-error" style="display: none;"><h4><%=textHandler.printf("index.false") %></h4></div>
			<div id="userSolution-success" style="display: none;"><h4><%=textHandler.printf("index.right") %></h4></div>
			<div id="userSolution-sample" style="display: none;"><h4></h4></div>
			<div id="ctn-solution"></div>			
		</div>
	</body>
</html>